<template>
	<view class="">
		
		
		<scroll-view scroll-y="true" class="listbox">
			
			<view class="hide" v-show="isShow">
					<h1>66666</h1>
			</view>
			
			
			<!-- 底部 -->
			<cmd-bottom-nav
			class="bottomBox"
			:current="current" 
			:list="list" 
			border-color="#ffff" 
			background-color="#4CD964" 
			font-color="#fff" 
			active-font-color="#ffff"
			@tap="click"
			></cmd-bottom-nav>
		
			
			<view class="" v-show="!isShow">
				<!-- 书籍固有信息 -->
				<uni-list>
				     <uni-list-item title="失控" note="完结 共24章" :show-arrow="false"></uni-list-item>
					 <uni-list-item title="封面" :show-arrow="false"></uni-list-item>
					 <uni-list-item title="版权信息" :show-arrow="false"></uni-list-item>
					 <uni-list-item title="致《 失控 》中文版的读者们" :show-arrow="false"></uni-list-item>
				</uni-list>
				<!-- 正式进入章节 -->
				<uni-list>
					 <view class="" 
					 v-for="( item ) in chapterList" :key="item.id">
						 <uni-list-item  
						 :title="item.chapterName" 
						 :show-arrow="false">  
						 </uni-list-item>
						 <uni-list-item  
						 :title="item.directoryList[0].secondChapter" 
						 :show-arrow="false" 
						 class="indent">  
						 </uni-list-item>	 
					 </view>
				</uni-list>
			</view>
		</scroll-view>
		
		
	
	</view>
</template>

<script>
	import Artilce from '@/Json.js'
	import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
	export default {
		props: {
			Bookid: {
				type: Number,
				default: 0
			},
		},
		components: {
			cmdBottomNav
		},
		created() {
			
			this.articleContent= Artilce.chapterContent
			
			uni.request({
				url:`${this.$url}/chapter/findAll/${this.Bookid}`,
				success:(res) => {
					this.chapterList = res.data.data
				}
			})
			
		},
		data() {
			return {
				chapterList:'',
				articleContent:'',
				isShow:false,
				current: 0,
				list:[{
				    "pagePath": "/pages/tabbar/home/home",
				    "text": "目录", 
				},
				{
				    "pagePath": "/pages/tabbar/home/home",
				    "text": "书签", 
				},
				]
			
			}
		},
		methods: {
			showMune(el){
				
			},
			hide(el) {
				
			},
			click(value){
				if(value.select === 1){
					this.isShow = !this.isShow
				}else{
					this.isShow = !this.isShow
				}
				
			}
			
		},
		
	}
</script>

<style scoped>
.indent{
	margin-left: 15px;
	
}
.listbox{
	height: 100vh;
}
</style>